<template>

  <div class='container'>
<el-card class="box-card" style="margin:10px 16px" shadow="always">
  <div >
    <!-- form 表单 -->
 <el-form :model="form" ref="form"  :inline="true"
  label-width="80px"
   class="headers"
   >
  <el-form-item prop="subjectName" label="学科名称">
    <el-input v-model="form.subjectName"  ></el-input>
  </el-form-item>

  <el-form-item>
    <el-button  size='small' @click="resetForm" >清除</el-button>
    <el-button type="primary" size='small' @click="search">搜索</el-button>
  </el-form-item>
</el-form>
  <el-button type="success" style="float: right"  @click="showAddDilog">新增学科</el-button>
  </div>
  <!--Alert警告栏 -->
    <el-alert
    title="消息提示的文案"
    type="info"
    show-icon>
  </el-alert>
  <!-- table表格 ==============================================================================-->
   <el-table
      v-loading='loading'
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="date"
        type="index"
        :index="indexMethod"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="学科名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期">
        <template #default="{row}">
          {{row.addDate |formatDate}}
        </template>
      </el-table-column>
      <el-table-column
        prop="isFrontDisplay"
        label="前台是否显示"
        :formatter="formatter"
        >
      </el-table-column>
      <el-table-column
        prop="twoLevelDirectory"
        label="二级目录">
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签">
      </el-table-column>
      <el-table-column
        prop="totals"
        label="题目数量">
      </el-table-column>
      <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <!-- {{row}} -->
              <el-button type="text" size="small" @click="$router.push(`directorys?id=${row.id}&name=${row.subjectName}`)" >学科分类</el-button>
              <el-button type="text" size="small" @click="$router.push(`tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
              <el-button type="text" size="small" @click="alterDilog(row)">修改</el-button>
              <el-button type="text" size="small" @click="del(row)">删除
              </el-button>
            </template>
          </el-table-column>
    </el-table>
    <!-- 分页器
    current-page当前页码
    page-sizes下啦数量
    page-size 每页条数
    total总条数 -->
   <el-pagination style="float:right"
   background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="request.page"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="request.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>
</el-card>
<!-- 新增学科对话框 -->
<AddSubjects
:dialogVisible.sync='dialogVisible'
 @reload="getList"
 :row='row'
 >
 </AddSubjects>

  </div>
</template>

<script>
import AddSubjects from '../components/subjects-add.vue'
import { list, remove } from '@/api/hmmm/subjects.js'

export default {
  name: 'Subjects',
  components: {
    AddSubjects
  },
  data () {
    return {
      list: [], // 学科列表
      row: {},
      form: {
        subjectName: '', // 学科名称
        isFrontDisplay: ''// 是否显示
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名', trigger: ['blur', 'change'] }

        ]

      },
      request: {
        page: 1, // 当前页数
        pagesize: 10, // 每页的条数
        subjectName: ''
      },
      // pages:0   //总共多少页
      total: 0, // 总条数
      loading: false, // 控制表格加载转态
      dialogVisible: false

    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取学科列表
    async getList () {
      // 发送请求前开启loading
      this.loading = true
      const { data } = await list(this.request)
      console.log(data)
      this.list = data.items
      this.total = data.counts
      // 请求结束后关闭loading
      this.loading = false
    },
    // 根据id删除学科
    async del (row) {
      console.log(row)
      const str = await this.$confirm('此操作将永久删除该该学科, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (str !== 'confirm') return this.$message('已取消删除')
      this.$message.success('已删除成功')
      // 根据id发送删除请求
      const res = await remove(row)
      console.log(res)
      if (this.list.length === 1 && this.request.page > 1) {
        this.request.page--
      }
      // 重新渲染
      this.getList()
    },
    // 分页器=============================
    handleSizeChange (newSize) {
      console.log(`每页 ${newSize} 条`)
      this.request.pagesize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      console.log(`当前页: ${newPage}`)
      this.request.page = newPage
      this.getList()
      console.log(this.page, this.pagesize)
    },
    // 序号
    indexMethod (index) {
      return index + 1 + (this.request.page - 1) * this.request.pagesize
    },
    // 修改提示,是否在前台显示
    formatter (row, column) {
      // console.log(row)
      // console.log(column)
      return row.isFrontDisplay === 1 ? '是' : '否'
    },
    // 添加
    showAddDilog () {
      this.dialogVisible = true
      this.row = {}
      // this.form.isFrontDisplay = 1
    },
    // 修改功能
    alterDilog (row) {
      this.dialogVisible = true
      this.row = row// 选中学科的详情
    },
    // 搜索
    search () {
      this.request.subjectName = this.form.subjectName
      this.getList(this.request)
    },
    resetForm () {
      this.$refs.form.resetFields()
    }

  }
}

</script>

<style scoped lang='scss'>
::v-deep .el-card__body{
 .el-form.headers{
    display: inline-block;
  }
}
</style>
